<template>
  <div class="hw-flex-style-e-c seach-boxs" :class="{ 'seach-boxst-active': seachShow }">
    <div class="seach-boxs-input" :class="{ 'seach-boxs-input-active': seachShow }">
      <t-input @blur="blur" @Enter="onEnter" placeholder="请输入搜索内容" style="width: 180px" v-model="value">
      </t-input>
    </div>
    <div class="doorIcon-parent">
      <i class="doorIcon" @click.stop="onEnter">&#xe62c;</i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
const value = ref('');
const seachShow = ref(false);
const props = defineProps({
  modelValue: {
    type: String,
  },
});
const emit = defineEmits(['onEnterValue', 'update:modelValue']);
const blur = () => {
  //输入框消失
  setTimeout(() => {
    seachShow.value = false;
  }, 400);
};
const onEnter = () => {
  emit('update:modelValue', value.value);
  if (!seachShow.value) {
    seachShow.value = true;
  } else {
    emit('onEnterValue', value.value);
  }
};
watch(
  () => props.modelValue,
  () => {
    value.value = '';
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.seach-boxs {
  position: relative;
  height: 36px;
  :deep(.t-input) {
    height: 36px;
  }
  .seach-boxs-input {
    width: 0px;
    overflow: hidden;
    transition: all 0.3s;
  }
  .doorIcon {
    cursor: pointer;

    font-size: 24px;
    line-height: 24px;
    color: #141414;
  }
  .doorIcon-parent {
    z-index: 66;
    position: absolute;
    top: 6px;
    right: 0px;
    width: 24px;
    height: 24px;
  }
  .seach-boxs-input-active {
    width: 180px;
  }
}
.doorIcon:hover {
  color: #e62b17;
}
.seach-boxst-active { 
  position: relative; 
  // padding-right: 24px;
  .doorIcon-parent {
    position: absolute; 
    top: 6px !important;
    right: 8px !important;
  }
  :deep(.t-input) {
   padding-right: 40px; 
  }
}
</style>
